<template>
  <div class="pos">
    <el-row>
      <el-col :span="7" class="pos-order" id="order-list">
        <el-tabs stretch>
          <el-tab-pane label="点餐"><!--show-summary-->
            <el-table :data="tableData" border style="width: 100%">
              <el-table-column prop="goodsName" label="商品名称"></el-table-column>
              <el-table-column prop="count" label="数量" width="50"></el-table-column>
              <el-table-column prop="price" label="金额" width="70"></el-table-column>
              <el-table-column label="操作" width="100" fixed="right">
                <template scope="scope">
                  <el-button type="text" size="small" @click="deleteGoods(scope.row)">删除</el-button>
                  <el-button type="text" size="small" @click="addOrderList(scope.row)">增加</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="total-div">
              <small>数量：</small>
              {{totalCount}} &nbsp;&nbsp;&nbsp;
              <small>金额：</small>
              {{totalMoney}}元
            </div>
            <div class="div-but">
              <el-button type="warning" size="small">挂单</el-button>
              <el-button type="danger" size="small" @click="deleteAllGoods">删除</el-button>
              <el-button type="success" size="small" @click="checkout">结账</el-button>
            </div>
          </el-tab-pane>
          <el-tab-pane label="挂单">挂单</el-tab-pane>
          <el-tab-pane label="外卖">外卖</el-tab-pane>
        </el-tabs>
      </el-col>
      <el-col :span="17">
        <div class="often-goods">
          <div class="title">常用商品</div>
          <div class="often-goods-list">
            <ul>
              <li v-for="item in oftenGoods" @click="addOrderList(item)">
                <span>{{item.goodsName}}</span>
                <span class="o-price">￥{{item.price}}元</span>
              </li>
            </ul>
          </div>
        </div>

        <div class="goods-type">
          <el-tabs stretch>
            <el-tab-pane label="汉堡">
              <div>
                <ul class='cookList'>
                  <li v-for="item in type0Goods" @click="addOrderList(item)">
                    <span class="foodImg"><img :src="item.goodsImg" width="100%"></span>
                    <span class="foodName">{{item.goodsName}}</span>
                    <span class="foodPrice">￥{{item.price}}元</span>
                  </li>
                </ul>
              </div>
            </el-tab-pane>
            <el-tab-pane label="小食">
              <div>
                <ul class='cookList'>
                  <li v-for="item in type1Goods" @click="addOrderList(item)">
                    <span class="foodImg"><img :src="item.goodsImg" width="100%"></span>
                    <span class="foodName">{{item.goodsName}}</span>
                    <span class="foodPrice">￥{{item.price}}元</span>
                  </li>
                </ul>
              </div>
            </el-tab-pane>
            <el-tab-pane label="饮料">
              <div>
                <ul class='cookList'>
                  <li v-for="item in type2Goods" @click="addOrderList(item)">
                    <span class="foodImg"><img :src="item.goodsImg" width="100%"></span>
                    <span class="foodName">{{item.goodsName}}</span>
                    <span class="foodPrice">￥{{item.price}}元</span>
                  </li>
                </ul>
              </div>
            </el-tab-pane>
            <el-tab-pane label="套餐">
              <div>
                <ul class='cookList'>
                  <li v-for="item in type3Goods" @click="addOrderList(item)">
                    <span class="foodImg"><img :src="item.goodsImg" width="100%"></span>
                    <span class="foodName">{{item.goodsName}}</span>
                    <span class="foodPrice">￥{{item.price}}元</span>
                  </li>
                </ul>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-col>
    </el-row>

  </div>
</template>

<script>
  import axios from 'axios'

  export default {
    name: "Pos",
    data() {
      return {
        tableData: [],
        oftenGoods: [
          {
            goodsId: 1,
            goodsName: '香辣鸡腿堡',
            price: 18
          }, {
            goodsId: 2,
            goodsName: '田园鸡腿堡',
            price: 15
          }, {
            goodsId: 3,
            goodsName: '和风汉堡',
            price: 15
          }, {
            goodsId: 4,
            goodsName: '快乐全家桶',
            price: 80
          }, {
            goodsId: 5,
            goodsName: '脆皮炸鸡腿',
            price: 10
          }, {
            goodsId: 6,
            goodsName: '魔法鸡块',
            price: 20
          }, {
            goodsId: 7,
            goodsName: '可乐大杯',
            price: 10
          }, {
            goodsId: 8,
            goodsName: '雪顶咖啡',
            price: 18
          }, {
            goodsId: 9,
            goodsName: '大块鸡米花',
            price: 15
          }, {
            goodsId: 20,
            goodsName: '香脆鸡柳',
            price: 17
          }
        ],
        type0Goods: [
          {
            goodsId: 1,
            goodsImg: "https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1575988740&di=15a22721df8cd73ac4a414a7de480584&src=http://images4.c-ctrip.com/target/fd/tuangou/g6/M06/B0/21/CggYslcNvP-AFUhhAABUFbBzbBg076_600_400_s.jpg",
            goodsName: '香辣鸡腿堡',
            price: 18
          }, {
            goodsId: 2,
            goodsImg: "https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1575988740&di=15a22721df8cd73ac4a414a7de480584&src=http://images4.c-ctrip.com/target/fd/tuangou/g6/M06/B0/21/CggYslcNvP-AFUhhAABUFbBzbBg076_600_400_s.jpg",
            goodsName: '田园鸡腿堡',
            price: 15
          }, {
            goodsId: 3,
            goodsImg: "https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1575988740&di=15a22721df8cd73ac4a414a7de480584&src=http://images4.c-ctrip.com/target/fd/tuangou/g6/M06/B0/21/CggYslcNvP-AFUhhAABUFbBzbBg076_600_400_s.jpg",
            goodsName: '和风汉堡',
            price: 15
          }, {
            goodsId: 4,
            goodsImg: "https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1575988740&di=15a22721df8cd73ac4a414a7de480584&src=http://images4.c-ctrip.com/target/fd/tuangou/g6/M06/B0/21/CggYslcNvP-AFUhhAABUFbBzbBg076_600_400_s.jpg",
            goodsName: '快乐全家桶',
            price: 80
          }, {
            goodsId: 5,
            goodsImg: "https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1575988740&di=15a22721df8cd73ac4a414a7de480584&src=http://images4.c-ctrip.com/target/fd/tuangou/g6/M06/B0/21/CggYslcNvP-AFUhhAABUFbBzbBg076_600_400_s.jpg",
            goodsName: '脆皮炸鸡腿',
            price: 10
          }, {
            goodsId: 6,
            goodsImg: "https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1575988740&di=15a22721df8cd73ac4a414a7de480584&src=http://images4.c-ctrip.com/target/fd/tuangou/g6/M06/B0/21/CggYslcNvP-AFUhhAABUFbBzbBg076_600_400_s.jpg",
            goodsName: '魔法鸡块',
            price: 20
          }, {
            goodsId: 7,
            goodsImg: "https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1575988740&di=15a22721df8cd73ac4a414a7de480584&src=http://images4.c-ctrip.com/target/fd/tuangou/g6/M06/B0/21/CggYslcNvP-AFUhhAABUFbBzbBg076_600_400_s.jpg",
            goodsName: '可乐大杯',
            price: 10
          }, {
            goodsId: 8,
            goodsImg: "https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1575988740&di=15a22721df8cd73ac4a414a7de480584&src=http://images4.c-ctrip.com/target/fd/tuangou/g6/M06/B0/21/CggYslcNvP-AFUhhAABUFbBzbBg076_600_400_s.jpg",
            goodsName: '雪顶咖啡',
            price: 18
          }, {
            goodsId: 9,
            goodsImg: "https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1575988740&di=15a22721df8cd73ac4a414a7de480584&src=http://images4.c-ctrip.com/target/fd/tuangou/g6/M06/B0/21/CggYslcNvP-AFUhhAABUFbBzbBg076_600_400_s.jpg",
            goodsName: '大块鸡米花',
            price: 15
          }, {
            goodsId: 20,
            goodsImg: "https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1575988740&di=15a22721df8cd73ac4a414a7de480584&src=http://images4.c-ctrip.com/target/fd/tuangou/g6/M06/B0/21/CggYslcNvP-AFUhhAABUFbBzbBg076_600_400_s.jpg",
            goodsName: '香脆鸡柳',
            price: 17
          }
        ],
        type1Goods: [
          {
            goodsId: 1,
            goodsImg: "https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1575988740&di=15a22721df8cd73ac4a414a7de480584&src=http://images4.c-ctrip.com/target/fd/tuangou/g6/M06/B0/21/CggYslcNvP-AFUhhAABUFbBzbBg076_600_400_s.jpg",
            goodsName: '香辣鸡腿堡',
            price: 18
          }, {
            goodsId: 2,
            goodsImg: "https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1575988740&di=15a22721df8cd73ac4a414a7de480584&src=http://images4.c-ctrip.com/target/fd/tuangou/g6/M06/B0/21/CggYslcNvP-AFUhhAABUFbBzbBg076_600_400_s.jpg",
            goodsName: '田园鸡腿堡',
            price: 15
          }, {
            goodsId: 3,
            goodsImg: "https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1575988740&di=15a22721df8cd73ac4a414a7de480584&src=http://images4.c-ctrip.com/target/fd/tuangou/g6/M06/B0/21/CggYslcNvP-AFUhhAABUFbBzbBg076_600_400_s.jpg",
            goodsName: '和风汉堡',
            price: 15
          }, {
            goodsId: 4,
            goodsImg: "https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1575988740&di=15a22721df8cd73ac4a414a7de480584&src=http://images4.c-ctrip.com/target/fd/tuangou/g6/M06/B0/21/CggYslcNvP-AFUhhAABUFbBzbBg076_600_400_s.jpg",
            goodsName: '快乐全家桶',
            price: 80
          }, {
            goodsId: 5,
            goodsImg: "https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1575988740&di=15a22721df8cd73ac4a414a7de480584&src=http://images4.c-ctrip.com/target/fd/tuangou/g6/M06/B0/21/CggYslcNvP-AFUhhAABUFbBzbBg076_600_400_s.jpg",
            goodsName: '脆皮炸鸡腿',
            price: 10
          }, {
            goodsId: 6,
            goodsImg: "https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1575988740&di=15a22721df8cd73ac4a414a7de480584&src=http://images4.c-ctrip.com/target/fd/tuangou/g6/M06/B0/21/CggYslcNvP-AFUhhAABUFbBzbBg076_600_400_s.jpg",
            goodsName: '魔法鸡块',
            price: 20
          }, {
            goodsId: 7,
            goodsImg: "https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1575988740&di=15a22721df8cd73ac4a414a7de480584&src=http://images4.c-ctrip.com/target/fd/tuangou/g6/M06/B0/21/CggYslcNvP-AFUhhAABUFbBzbBg076_600_400_s.jpg",
            goodsName: '可乐大杯',
            price: 10
          }, {
            goodsId: 8,
            goodsImg: "https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1575988740&di=15a22721df8cd73ac4a414a7de480584&src=http://images4.c-ctrip.com/target/fd/tuangou/g6/M06/B0/21/CggYslcNvP-AFUhhAABUFbBzbBg076_600_400_s.jpg",
            goodsName: '雪顶咖啡',
            price: 18
          }, {
            goodsId: 9,
            goodsImg: "https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1575988740&di=15a22721df8cd73ac4a414a7de480584&src=http://images4.c-ctrip.com/target/fd/tuangou/g6/M06/B0/21/CggYslcNvP-AFUhhAABUFbBzbBg076_600_400_s.jpg",
            goodsName: '大块鸡米花',
            price: 15
          }, {
            goodsId: 20,
            goodsImg: "https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1575988740&di=15a22721df8cd73ac4a414a7de480584&src=http://images4.c-ctrip.com/target/fd/tuangou/g6/M06/B0/21/CggYslcNvP-AFUhhAABUFbBzbBg076_600_400_s.jpg",
            goodsName: '香脆鸡柳',
            price: 17
          }
        ],
        type2Goods: [
          {
            goodsId: 1,
            goodsImg: "https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1575988740&di=15a22721df8cd73ac4a414a7de480584&src=http://images4.c-ctrip.com/target/fd/tuangou/g6/M06/B0/21/CggYslcNvP-AFUhhAABUFbBzbBg076_600_400_s.jpg",
            goodsName: '香辣鸡腿堡',
            price: 18
          }, {
            goodsId: 2,
            goodsImg: "https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1575988740&di=15a22721df8cd73ac4a414a7de480584&src=http://images4.c-ctrip.com/target/fd/tuangou/g6/M06/B0/21/CggYslcNvP-AFUhhAABUFbBzbBg076_600_400_s.jpg",
            goodsName: '田园鸡腿堡',
            price: 15
          }, {
            goodsId: 3,
            goodsImg: "https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1575988740&di=15a22721df8cd73ac4a414a7de480584&src=http://images4.c-ctrip.com/target/fd/tuangou/g6/M06/B0/21/CggYslcNvP-AFUhhAABUFbBzbBg076_600_400_s.jpg",
            goodsName: '和风汉堡',
            price: 15
          }, {
            goodsId: 4,
            goodsImg: "https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1575988740&di=15a22721df8cd73ac4a414a7de480584&src=http://images4.c-ctrip.com/target/fd/tuangou/g6/M06/B0/21/CggYslcNvP-AFUhhAABUFbBzbBg076_600_400_s.jpg",
            goodsName: '快乐全家桶',
            price: 80
          }, {
            goodsId: 5,
            goodsImg: "https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1575988740&di=15a22721df8cd73ac4a414a7de480584&src=http://images4.c-ctrip.com/target/fd/tuangou/g6/M06/B0/21/CggYslcNvP-AFUhhAABUFbBzbBg076_600_400_s.jpg",
            goodsName: '脆皮炸鸡腿',
            price: 10
          }, {
            goodsId: 6,
            goodsImg: "https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1575988740&di=15a22721df8cd73ac4a414a7de480584&src=http://images4.c-ctrip.com/target/fd/tuangou/g6/M06/B0/21/CggYslcNvP-AFUhhAABUFbBzbBg076_600_400_s.jpg",
            goodsName: '魔法鸡块',
            price: 20
          }, {
            goodsId: 7,
            goodsImg: "https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1575988740&di=15a22721df8cd73ac4a414a7de480584&src=http://images4.c-ctrip.com/target/fd/tuangou/g6/M06/B0/21/CggYslcNvP-AFUhhAABUFbBzbBg076_600_400_s.jpg",
            goodsName: '可乐大杯',
            price: 10
          }, {
            goodsId: 8,
            goodsImg: "https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1575988740&di=15a22721df8cd73ac4a414a7de480584&src=http://images4.c-ctrip.com/target/fd/tuangou/g6/M06/B0/21/CggYslcNvP-AFUhhAABUFbBzbBg076_600_400_s.jpg",
            goodsName: '雪顶咖啡',
            price: 18
          }, {
            goodsId: 9,
            goodsImg: "https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1575988740&di=15a22721df8cd73ac4a414a7de480584&src=http://images4.c-ctrip.com/target/fd/tuangou/g6/M06/B0/21/CggYslcNvP-AFUhhAABUFbBzbBg076_600_400_s.jpg",
            goodsName: '大块鸡米花',
            price: 15
          }, {
            goodsId: 20,
            goodsImg: "https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1575988740&di=15a22721df8cd73ac4a414a7de480584&src=http://images4.c-ctrip.com/target/fd/tuangou/g6/M06/B0/21/CggYslcNvP-AFUhhAABUFbBzbBg076_600_400_s.jpg",
            goodsName: '香脆鸡柳',
            price: 17
          }
        ],
        type3Goods: [
          {
            goodsId: 1,
            goodsImg: "https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1575988740&di=15a22721df8cd73ac4a414a7de480584&src=http://images4.c-ctrip.com/target/fd/tuangou/g6/M06/B0/21/CggYslcNvP-AFUhhAABUFbBzbBg076_600_400_s.jpg",
            goodsName: '香辣鸡腿堡',
            price: 18
          }, {
            goodsId: 2,
            goodsImg: "https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1575988740&di=15a22721df8cd73ac4a414a7de480584&src=http://images4.c-ctrip.com/target/fd/tuangou/g6/M06/B0/21/CggYslcNvP-AFUhhAABUFbBzbBg076_600_400_s.jpg",
            goodsName: '田园鸡腿堡',
            price: 15
          }, {
            goodsId: 3,
            goodsImg: "https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1575988740&di=15a22721df8cd73ac4a414a7de480584&src=http://images4.c-ctrip.com/target/fd/tuangou/g6/M06/B0/21/CggYslcNvP-AFUhhAABUFbBzbBg076_600_400_s.jpg",
            goodsName: '和风汉堡',
            price: 15
          }, {
            goodsId: 4,
            goodsImg: "https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1575988740&di=15a22721df8cd73ac4a414a7de480584&src=http://images4.c-ctrip.com/target/fd/tuangou/g6/M06/B0/21/CggYslcNvP-AFUhhAABUFbBzbBg076_600_400_s.jpg",
            goodsName: '快乐全家桶',
            price: 80
          }, {
            goodsId: 5,
            goodsImg: "https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1575988740&di=15a22721df8cd73ac4a414a7de480584&src=http://images4.c-ctrip.com/target/fd/tuangou/g6/M06/B0/21/CggYslcNvP-AFUhhAABUFbBzbBg076_600_400_s.jpg",
            goodsName: '脆皮炸鸡腿',
            price: 10
          }, {
            goodsId: 6,
            goodsImg: "https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1575988740&di=15a22721df8cd73ac4a414a7de480584&src=http://images4.c-ctrip.com/target/fd/tuangou/g6/M06/B0/21/CggYslcNvP-AFUhhAABUFbBzbBg076_600_400_s.jpg",
            goodsName: '魔法鸡块',
            price: 20
          }, {
            goodsId: 7,
            goodsImg: "https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1575988740&di=15a22721df8cd73ac4a414a7de480584&src=http://images4.c-ctrip.com/target/fd/tuangou/g6/M06/B0/21/CggYslcNvP-AFUhhAABUFbBzbBg076_600_400_s.jpg",
            goodsName: '可乐大杯',
            price: 10
          }, {
            goodsId: 8,
            goodsImg: "https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1575988740&di=15a22721df8cd73ac4a414a7de480584&src=http://images4.c-ctrip.com/target/fd/tuangou/g6/M06/B0/21/CggYslcNvP-AFUhhAABUFbBzbBg076_600_400_s.jpg",
            goodsName: '雪顶咖啡',
            price: 18
          }, {
            goodsId: 9,
            goodsImg: "https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1575988740&di=15a22721df8cd73ac4a414a7de480584&src=http://images4.c-ctrip.com/target/fd/tuangou/g6/M06/B0/21/CggYslcNvP-AFUhhAABUFbBzbBg076_600_400_s.jpg",
            goodsName: '大块鸡米花',
            price: 15
          }, {
            goodsId: 20,
            goodsImg: "https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1575988740&di=15a22721df8cd73ac4a414a7de480584&src=http://images4.c-ctrip.com/target/fd/tuangou/g6/M06/B0/21/CggYslcNvP-AFUhhAABUFbBzbBg076_600_400_s.jpg",
            goodsName: '香脆鸡柳',
            price: 17
          }
        ],
        totalMoney: 0,
        totalCount: 0,
      }
    },
    created() {
      /* //获取常用商品
       axios.get('https://www.easy-mock.com/mock/5b8b30dbf032f03c5e71de7f/kuaican/oftenGoods')
         .then(response => {
           console.log(response)
           this.oftenGoods = response.data
         })
         .catch(error => {
           console.log(error)
           // alert(error)
         })

       //分类商品数据
       axios.get('https://www.easy-mock.com/mock/5b8b30dbf032f03c5e71de7f/kuaican/typeGoods')
         .then(response => {
           console.log(response)
           this.type0Goods = response.data[0];
           this.type1Goods = response.data[1];
           this.type2Goods = response.data[2];
           this.type3Goods = response.data[3];
         })
         .catch(error => {
           console.log(error)
           // alert(error)
         })*/
    },
    mounted() {
      let orderHeiht = document.body.clientHeight
      console.log(orderHeiht)
      document.getElementById('order-list').style.height = orderHeiht + "px"
    },
    methods: {
      addOrderList(goods) {
        this.totalMoney = 0;
        this.totalCount = 0;
        //商品是否已存在于订单列表中
        let isHave = false
        for (let i = 0; i < this.tableData.length; i++) {
          if (this.tableData[i].goodsId == goods.goodsId) {
            isHave = true
          }
        }

        //根据判断的值编写业务逻辑
        if (isHave) {
          //改变列表中的商品数量
          let arr = this.tableData.filter(o => o.goodsId == goods.goodsId)
          arr[0].count++
          // arr[0].price += goods.price
        } else {
          let newGoods = {
            goodsId: goods.goodsId,
            goodsName: goods.goodsName,
            price: goods.price,
            count: 1
          }
          this.tableData.push(newGoods)
        }
        this.getAllMoney();
      },
      //删除单个商品
      deleteGoods(goods) {
        this.tableData = this.tableData.filter(o => o.goodsId != goods.goodsId);
        this.getAllMoney();
      },
      //删除所有商品
      deleteAllGoods() {
        this.tableData = [];
        this.totalMoney = 0;
        this.totalCount = 0;
      },
      //汇总数据量金额
      getAllMoney() {
        this.totalCount = 0;
        this.totalMoney = 0;
        if (this.tableData) {
          //计算汇总金额和数量
          this.tableData.forEach((element) => {
            this.totalCount += element.count;
            this.totalMoney = this.totalMoney + (element.price * element.count);
          })
        }
      },
      //模拟结账
      checkout(){
        if(this.totalCount != 0){
          this.tableData = [];
          this.totalMoney = 0;
          this.totalCount = 0;
          this.$message({
            message: '结账成功，这是一条成功消息',
            type: 'success'
          })
        }else {
          this.$message.error("商品为空！！！")
        }
      }

    }
  }
</script>

<style scoped>
  .pos-order {
    background-color: #f9fafc;
    border-right: 1px solid #c0ccda;
  }

  .div-but {
    margin-top: 10px;
  }

  .title {
    height: 20px;
    border-bottom: 1px solid #D3DCE6;
    background-color: #F9FAFC;
    padding: 10px;
  }

  .often-goods-list ul li {
    list-style: none;
    float: left;
    border: 1px solid #E5E9F2;
    padding: 10px;
    margin: 5px;
    background-color: #fff;
  }

  .o-price {
    color: #58B7FF;
  }

  .goods-type {
    clear: both;
  }

  .cookList li {
    list-style: none;
    width: 23%;
    border: 1px solid #E5E9F2;
    height: auot;
    overflow: hidden;
    background-color: #fff;
    padding: 2px;
    float: left;
    margin: 2px;
    cursor: pointer;
  }

  .cookList li span {

    display: block;
    float: left;
  }

  .foodImg {
    width: 40%;
  }

  .foodName {
    font-size: 16px;
    padding-left: 10px;
    color: brown;

  }

  .foodPrice {
    font-size: 16px;
    padding-left: 10px;
    padding-top: 10px;
  }

  .total-div {
    background-color: #ffffff;
    padding: 10px;
    border-bottom: 1px solid #D3DCE6;
    text-align: center;
  }
</style>
